import React, { Component } from 'react'

export default class Demo extends Component {
  state = {count: 0}

  add = () => {
    //1. 获取原来的count值
    const {count} = this.state
    //2. 更新状态 第一种调用
    // this.setState({count: count*1 + 1}) // 方法是同步的，但是后续动作是异步的
    // console.log("12行的输出", this.state.count) // 所以这里仍然输出 0

    //3. 更新状态 第二种调用 这里的回调函数在组件重新渲染完之后会调用
    // this.setState({count: count*1 + 1}, ()=>{
    //   console.log(this.state.count)
    // })

    // 函数式的setState, 优势可以接受props，还可以简写
    // this.setState((state, props)=>{
    //   return {count: state.count+ props.x}
    // })

    this.setState(
      (state, props)=>{
        return {count: state.count+ props.x}
      }, 
      ()=>{console.log(this.state.count)}
    )
  }
  

  render() {
    return (
      <div>
        <h1>当前求和为：{this.state.count}</h1>
        <button onClick={this.add}>点我+1</button>
      </div>
    )
  }
}
